<template>
  <div class="safety">
    <vheader pageTitle="安全认证"></vheader>
    <div class="safety-list">
      <ul>
        <li class="border-1px">
          <span class="icon-Selected" :style="{color: auth === '1' ? '#ff4133' : '#e5e5e5'}"></span><strong>实名认证</strong><p v-if="auth === '1'">{{ realName }}{{ idCardNo }}</p><p v-else @click="authHandle">认证</p><span class="icon-more" v-if="auth === '0'"></span>
        </li>
        <li class="border-1px">
          <span class="icon-Selected" :style="{color: '#ff4133'}"></span><strong>认证手机</strong><p>{{ loginName }}</p><span class="icon-edit" @click="editPhone"></span>          
        </li>
        <li class="border-1px">
          <span class="icon-Selected" :style="{color: bankCardNum !== '' ? '#ff4133' : '#e5e5e5'}"></span><strong>银行卡</strong><p @click="bindCard">{{ bankCardNum === '' ? '绑定' : bankCardNum}}</p><span class="icon-more"></span>          
        </li>
        <li class="border-1px">
          <span class="icon-Selected" :style="{color: '#ff4133'}"></span><strong>登录密码</strong><p @click="editPassword">修改</p><span class="icon-more"></span>
        </li>
      </ul>
    </div>
    <div class="safety-auth" v-show="authShow">
      <form :action="post_url" id="form" method="get">
        <input type="hidden" name="realName" v-model="realName">
        <input type="hidden" name="cardNo" v-model="cardNo">
        <input type="hidden" name="acctKey" v-model="acctKey">
        <input type="hidden" name="returnUrl" v-model="returnUrl">
      </form>
      <div class="realname border-1px">
        <span>真实姓名</span>
        <input type="text" placeholder="请输入您的真实姓名" v-model="realName">        
      </div>
      <div class="idcard border-1px">
        <span>身份证号</span>
        <input type="text" placeholder="请输入您的身份证号" v-model="cardNo">
      </div>
      <div @click="goAuth" class="safety-auth-btn">
        <vbutton text="立即认证" :loading="loading"></vbutton>
      </div>
    </div>

    <div class="safety-edit" v-show="editShow">
      <div class="realname border-1px">
        <input type="password" placeholder="旧密码" v-model="oldPassWord">        
      </div>
      <div class="idcard border-1px">
        <input type="password" placeholder="新密码" v-model="newPassWord">
      </div>
      <div class="idcard border-1px">
        <input type="password" placeholder="再次输入新密码" v-model="newPassWordAgin">
      </div>
      <div @click="edit" class="safety-edit-btn">
        <vbutton text="修改" :loading="loading"></vbutton>
      </div>
    </div>
    <vmask v-show="maskShow" @click="hiddenHandle"></vmask>
  </div>
</template>

<script>
  import vheader from 'components/common/comHead'
  import { Toast, Spinner } from 'mint-ui'
  import vmask from 'components/common/mask'
  import { isIdCardNo } from '@/tool/check.js'
  import vbutton from 'components/common/button'

  export default {
    data () {
      return {
        bankCardNum: '',
        identNum: '',
        maskShow: false,
        authShow: false,
        editShow: false,
        post_url: '',
        oldPassWord: '',
        newPassWord: '',
        newPassWordAgin: '',
        loading: false,
        // 提交到一麻袋的表单
        realName: '',
        cardNo: '',
        acctKey: '',
        returnUrl: ''
      }
    },
    computed: {
      loginName () {
        return this.$store.state.user.mobile
      },
      realName () {
        return this.$store.state.user.realName
      },
      idCardNo () {
        return this.$store.state.user.idCardNo
      },
      auth () {
        return this.$store.state.user.openAcctStatus
      }

    },
    methods: {
      bindCard () {
        if (!this.auth) {
          Toast('实名认证后才能绑定银行卡~')
        } else {
          this.$router.push('/bindCard')
        }
      },
      authHandle () {
        this.maskShow = true
        this.authShow = true
      },
      hiddenHandle () {
        this.maskShow = false
        this.authShow = false
        this.editShow = false
      },
      editPassword () {
        this.maskShow = true
        this.editShow = true
      },
      edit () {
        const acctKey = this.getUserCookie('acctKey')
        const oldPwd = this.oldPassWord
        const newPwd = this.newPassWord
        const newPwdAgin = this.newPassWordAgin
        if (oldPwd.length < 6 || newPwd.length < 6 || newPwdAgin.length < 6) {
          Toast('密码必须大于6位')
          return
        }
        if (newPwd !== newPwdAgin) {
          Toast('新旧密码不一样，请重新输入')
          return
        }
        this.loading = true
        this.$http.post('/api/member/updatePassword', `acctKey=${acctKey}&oldPassword=${oldPwd}&newPassword=${newPwd}`)
        .then((res) => {
          if (res.data.success) {
            Toast({
              message: '修改密码成功',
              iconClass: 'icon icon-success',
              duration: 600
            })
            setTimeout(() => {
              this.$router.push('/login')
            }, 500)
          } else {
            Toast(res.data.msg)
            this.loading = false
          }
        })
        .catch((err) => {
          console.log(err)
          this.loading = false
        })
      },
      _isIdCardAuth () {
        const realName = this.realName
        const cardNo = this.cardNo
        const acctKey = this.acctKey

        this.$http.get(`/api/member/account/pc/validateIdCardNo?realName=${realName}&cardNo=${cardNo}&acctKey=${acctKey}`)
          .then((res) => {
            if (res.data.success) {
              document.getElementById('form').submit()
              this.loading = false
            } else {
              Toast(res.data.msg)
              this.loading = false
            }
          })
      },
      goAuth () {
        if (this.realName === '') {
          Toast('请输入正确的姓名')
          return
        }
        if (isIdCardNo(this.cardNo) === false) {
          Toast('请输入合法的身份证号')
          return
        }
        this.loading = true

        this._isIdCardAuth()
      },
      editPhone () {
        Toast('修改手机号请联系客服')
      }
    },
    created () {
      this.acctKey = this.$cookie.get('acctKey')
      this.returnUrl = 'http://m.fenmiaojinrong.com/successOpen'
      this.post_url = this.$http.defaults.baseURL + '/api/member/account/openAcct'
      // 获取银行卡列表
      this.$http.get(`/api/member/memberBank/list?acctKey=${this.acctKey}&platformType=1`)
        .then((res) => {
          if (res.data.success) {
            this.bankCardNum = res.data.data.list[0].bankCardNo
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    components: {
      vheader,
      vmask,
      mtSpinner: Spinner,
      vbutton
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';
  .safety {
    font-size: 32px;
    &-list {
      ul {
        padding: 0 30px;
        li {
          display: flex;
          align-items: center;
          height: 108px;
          @include border-1px(#{$base-e5e5e5});
          p {    
            flex: 1 1 auto;
            margin-top: 4px;
            text-align: right;
            color: $base-999;            
          }
          strong {
            display: inline-block;
            margin-top: 4px;
            color: $base-666;
          }
          span:nth-child(1) {
            margin-right: 20px;
            color: $base-e5e5e5;
          }
          span:nth-child(4) {
            margin-left: 20px;
            color: $base-999;
          }
            
        }
      }
    }
    &-auth,
    &-edit {
      position: fixed;
      left: 50%;
      top: 50%;
      z-index: $zIndex-10--eidt;
      transform: translate(-50%, -50%);
      width: 690px;
      background: $base-fff;
      text-align: center;
      border-radius: 10px;
      .realname,
      .idcard {
        display: flex;
        align-items: center;
        height: 110px;
        width: 630px;
        margin: 0 auto;
        @include border-1px(#{$base-e5e5e5});
        input {
          outline: none;
          flex: 1 0 auto;
          text-align: right;
        }
      }
      &-btn {
        margin: 70px auto 50px auto;
      }
    }
    &-edit {
      input {
        text-align: left !important;
      }
    }
  }
</style>
